/**
 * Created by user on 2/13/19.
 */
import React from 'react'
import { connect } from 'react-redux'
import QuestionListItem from './questionListItem'
import { VoicePlayer } from '@utils/Global'

import { QuestionAction } from '@act'

class QuestionList extends React.Component {
  closeMask = () => {
    const { dispatch, screen } = this.props
    const { toggleShow, stopAllVoice } = QuestionAction
    if (screen === 10 || screen === 20) {
      VoicePlayer.stop()
      dispatch(stopAllVoice())
    }
    dispatch(toggleShow(false))

  }
  renderList() {
    const { realList, screen } = this.props
    if (realList.length === 0) {
      return (
        <div className="no_list">暂无提问</div>
      )
    }
    let list = realList.map((item, index) => {
      return <QuestionListItem key={index} item={item} index={index} screen={screen}/>
    })

    return (
      <div className="question_list_inner">{ list }</div>
    )
  }
  render() {
    const { show } = this.props
    return (
      <div className={`global_question_list ${show ? '' : 'hide'}`}>
        <div className="question_list_mask_bg"></div>
        <div className="q_table">
          <div className="q_table_cell">
            <div className="question_list_mask">
              <img onClick={this.closeMask} className="close_icon" src={require('@images/link_close_icon.png')} alt=""/>
              <div className="title">提问列表</div>
              <div className="question_list">
                { this.renderList() }
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    realList: state.QuestionState.realList,
    show: state.QuestionState.show,
    screen: state.MainScreenState.screen
  }
}

export default connect(mapStateToProps)(QuestionList)
